<template>
  <div>
    <BaseHeader></BaseHeader>

    <div class="container width_1200">
      <Layout class="layoutAll">
        <Sider class="side-bar" ref="side" :collapsed-width="78">
          <Menu
            class="side-menu"
            theme="light"
            width="auto"
            :active-name="$route.name"
            :open-names="['订单中心', '会员中心', '账户中心']"
            @on-select="onSelect"
          >
            <div class="user-icon">
              <div class="user-img">
                <img class="member-logo" :src="isPlus" />
                <img
                  :src="userInfo.face"
                  style="width: 100%; height: 100%"
                  v-if="userInfo.face"
                  alt
                />
                <Avatar icon="ios-person" class="mb_10" v-else size="96" />
              </div>
              <p>{{ userInfo.nickName }}</p>
            </div>
            <Modal v-model="modal" :footer-hide="true" :width="800">
              <div class="plus-title">PLUS会员 畅享商品大折扣</div>
              <div class="plus-card">
                <div
                  class="plue-item"
                  @click="choicePlusType(i.plusType)"
                  :class="{ 'plue-active': tapPlusType == i.plusType }"
                  v-for="(i, k) in plusTypeList"
                  :key="k"
                >
                  <img
                    src="../../assets/shop/i3.png"
                    v-if="tapPlusType == i.plusType"
                  />
                  <div class="plue-name">{{ plusTypeEma[i.plusType] }}</div>
                  <div class="plue-price">
                    <span class="plue-price-logo">￥</span>
                    <span class="plue-price-num">{{ i.price }}</span>
                  </div>
                </div>
              </div>
              <div class="plus-xf">到期可立即续费</div>
              <div class="plus-cf-box">
                <div class="plus-cf-box-ab">
                  <div class="plus-btn-first">
                    <div class="plus-a">合计</div>
                    <div class="plus-b">￥</div>
                    <div class="plus-c">{{ tapPlusPrice }}</div>
                    <div class="plus-d">/月</div>
                  </div>
                  <div class="plus-agree" @click="applyPlus">
                    同意协议，立即支付
                  </div>
                  <div class="plue-xy">
                    <span>购买及视为同意</span>
                    <span
                      style="color: #256dff; cursor: pointer"
                      @click="modalPlusXy = true"
                      >《PLUS会员用户协议》</span
                    >
                  </div>
                </div>
              </div>
            </Modal>
            <Modal
              v-model="modalPlusXy"
              :title="plusPrivacyData.title"
              :footer-hide="true"
            >
              <div v-html="plusPrivacyData.content"></div>
            </Modal>
            <div class="current-grade">
              <div>{{ userInfo.gradeLevel + userInfo.gradeName }}</div>
            </div>
            <div class="openMembership" v-if="!this.userInfo.isPlus">
              <div>开通PLUS 畅享商品大折扣</div>
              <div class="goopenBtn" @click="goOpenPlus">去开通</div>
            </div>
            <div class="openMembership" v-else>
              <div>PLUS将于{{ plusEndtime }}天后到期</div>
              <div class="goopenBtn" @click="goOpenPlus">去续费</div>
            </div>
            <!--   循环导航栏       -->
            <Submenu
              v-for="(menu, index) in menuList"
              :key="index"
              :name="menu.title"
            >
              <template slot="title" v-if="menu.display">
                <Icon type="location"></Icon>
                <span>{{ menu.title }}</span>
              </template>
              <MenuItem
                v-for="(chlidren, i) in menu.menus"
                :key="i"
                :name="chlidren.path"
                >{{ chlidren.title }}</MenuItem
              >
            </Submenu>
          </Menu>
        </Sider>
        <Layout class="layout ml_10">
          <Content class="content">
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </Content>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
import menuList from "./menu";
import Storage from "@/plugins/storage.js";
import { plusList, payPlus, plusPrivacy } from "@/api/shopNewApi.js";
export default {
  name: "Home",
  data() {
    return {
      plusPrivacyData: {
        content: "",
        title: "",
      }, //隐私协议
      modalPlusXy: false,
      modal: false,
      menuList, // 会员中心左侧列表
      tapPlusType: "0", //plus选择的当前项
      plusTypeList: [
        //plus开通列表
      ], //plus类型
      plusTypeEma: {
        0: "月卡",
        1: "季卡",
        2: "年卡",
      },
    };
  },
  computed: {
    //plus到期时间
    plusEndtime() {
      if (this.userInfo.isPlus && this.userInfo.plusEndDate) {
        console.log(this.userInfo.plusEndDate,'this.userInfo.plusEndDate');
        const timer = new Date();
        const memberOverTime = new Date(this.userInfo.plusEndDate);
        return Math.ceil((memberOverTime - timer) / (1000 * 60 * 60 * 24));
      }
      return 0;
    },
    //puls会员标志
    isPlus() {
      if (this.userInfo.isPlus) {
        return require("../../assets/shop/i1ed.png");
      } else {
        return require("../../assets/shop/i1.png");
      }
    },
    //开通plus当前选择项的价格
    tapPlusPrice() {
      if (this.plusTypeList.length > 0) {
        return this.plusTypeList.find((i) => {
          return i.plusType == this.tapPlusType;
        }).price;
      } else {
        return 0;
      }
    },
    userInfo() {
      // 用户信息
      if (Storage.getItem("userInfo")) {
        return JSON.parse(Storage.getItem("userInfo"));
      } else {
        return {};
      }
    },
  },

  methods: {
    //选择plus开通类型
    choicePlusType(type) {
      this.tapPlusType = type;
    },
    async goOpenPlus() {
      await this.getPlusTypeLis();
      await this.plusPrivacyFn();
      this.modal = true;
    },
    //获取plus开通类型列表
    getPlusTypeLis() {
      plusList().then((res) => {
        if (res.success) {
          this.plusTypeList = res.result;
        } else {
          this.$Message.error("获取失败，请重试！");
        }
      });
    },
    //plus隐私协议
    plusPrivacyFn() {
      plusPrivacy().then((res) => {
        if (res.success) this.plusPrivacyData.content = res.result.content;
        this.plusPrivacyData.title = res.result.title;
      });
    },
    //支付plus会员
    applyPlus() {
      payPlus({
        client: "PC",
        plusType: this.tapPlusType,
      }).then((res) => {
        if (res.success) {
          this.$router.push({
            path: "/payment",
            query: { orderType: "PLUS", sn: res.result.sn },
          });
        }
      });
    },
    // 每次点击左侧bar的callback
    onSelect(name) {
      this.$router.push({ name: name });
    },
  },
};
</script>

<style scoped lang="scss">
.plus-xf {
  margin: 1rem;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;

}
.plus-cf-box {
  position: relative;
  height: 130px;

  .plus-cf-box-ab {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
  }
  .plus-btn-first {
    display: flex;
    align-items: center;
    vertical-align: bottom;
    justify-content: flex-end;
    .plus-a {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
    }
    .plus-b {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #e5393c;
      line-height: 36px;
    }
    .plus-c {
      font-size: 32px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #e5393c;
      line-height: 36px;
    }
    .plus-d {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #e5393c;
      line-height: 36px;
    }
  }
  .plus-agree {
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    color: #ffffff;
    background: #e5393c;
    border-radius: 25px;
    padding: 0.875rem 2.375rem;
    display: inline-block;
    margin: 0.7rem 0 0.625rem;
  }
}
.plus-title {
  font-size: 2rem;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000000;
  line-height: 36px;
  text-align: center;
  margin: 1.875rem 3.125rem;
}
.plue-active {
  border: 4px solid #d4a480 !important;
  background: linear-gradient(0deg, #fff3ed 0%, #fcfcf9 100%) !important;
  border-radius: 10px !important;
}
.plus-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.125rem;
  .plue-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 3.125rem;
    border: 2px solid #e3e3e3;
    position: relative;
    img {
      width: 3.25rem;
      height: 3.25rem;
      position: absolute;
      right: 0;
      bottom: 0px;
    }
    .plue-price {
      margin-top: 1.875rem;
      .plue-price-logo {
        font-size: 20px;
      }
      .plue-price-num {
        font-size: 40px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #f78533;
        line-height: 36px;
      }
    }
  }
  .plue-name {
    font-size: 40px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #622c0a;
  }
  .plue-price {
  }
}
.current-grade {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;

  div {
    padding: 0.375rem 1.25rem;
    display: inline-block;
    color: #aaaaaa;
    border-radius: 0.8125rem;
    border: 1px solid #aaaaaa;
    font-size: 0.875rem;
  }
}
.openMembership {
  height: 4.375rem;
  background: #fdedcb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #b58348;
  width: 11.875rem;
  margin: auto;
  .goopenBtn {
    background: #e4bb6f;
    border-radius: 0.625rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    padding: 2px 4px;
    font-size: 8px !important;
    cursor: pointer;
  }
}
.content {
  padding: 15px 50px;
}

.header {
  @include background_color($light_background_color);
}

.side-menu,
.side-bar,
.content {
  @include white_background_color();
  @include title_color($light_title_color);
}

.side-bar {
  min-height: 600px;
  height: auto;
}

.layoutAll {
  min-height: 1200px;
  @include background_color($light_background_color);
}

.container {
  margin: 0 auto;
  padding: 20px 0;
}

.side-bar a {
  @include title_color($light_title_color);
}

.user-icon {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-img {
  margin-bottom: 15px;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  img {
    width: 96px;
    height: 96px;
  }
  position: relative;
  .member-logo {
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: -3rem;
    right: -3rem;
  }
}

.layout-footer-center {
  padding: 0px 15px;

  padding-bottom: 15px;
  text-align: center;
}
</style>
